<template>
  <el-container class="header-wrapper">
    <el-aside class="logo">
      <video id="logo-video" :poster="videoUrl" autoplay muted loop
             playsinline type="video/mp4" :src="videoUrl"></video>
    </el-aside>
    <el-container class="content">
      <el-empty :description="$t('mes.noDataYet')" v-if="!data"/>
      <el-row class="m-border-2 m-solid m-border-radius-10 m-border-color-6366f1 m-border-blink" :gutter="10" style="width: 100%;padding: 5px 0 5px 0" v-else>
        <el-col :span="3">
          <shift-time-card></shift-time-card>
        </el-col>
        <el-col :span="5" >
          <process-fieldset :url="icon1" :name="processName" :text-style="{fontSize:'26px',height: '90px',letterSpacing:'.9rem'}"
                            :img-style="{height:'75px',marginTop:'10px'}"></process-fieldset>
        </el-col>
        <el-col v-for="(item,index) in data" :key="index" :span="item.span">
          <data-fieldset :title="item.name" :url="item.icon" :value="item.value" :unit="item.unit"
                         :textClass="`color${index+1}`"></data-fieldset>
        </el-col>
      </el-row>
    </el-container>
  </el-container>
</template>
<script setup>
import { defineProps } from 'vue'
import processFieldset from '@/components/mes/common/processFieldset'
import config from '@/config/index'
import dataFieldset from '@/components/mes/JCLines/dataFieldset'
import shiftTimeCard from '@/components/mes/common/shiftTimeCard.vue'

const videoUrl = config.ossUrl + '/afl-data-screen/images/job.mp4'
const icon1 = config.ossUrl + '/afl-data-screen/images/icon-screen.png'
const props = defineProps({
  processName: {
    type: String,
    default: '-'
  },
  data: {
    type: Object,
    default: null
  }
})
</script>

<style scoped lang="scss">
.header-wrapper {
  height: 100%;
  border-bottom: 3px solid #7952B3;

  .row-wrapper {
    display: flex;
    flex-direction: row;
  }

  .content {
    padding: 10px;
  }
}

.logo {
  width: 300px;
  overflow: hidden;
  /*background: url("@/images/numberBg1.png") no-repeat;*/
  /*background-size: 100% 100%;*/
  /*padding: 0;*/
  /*text-align: center;*/
}

#logo-video {
  width: 250px;
  height: 100%;
  mix-blend-mode: darken;
}
</style>
